<template>
  <section class="home-container">
    <NavHeader :title="address.address">
      <router-link to="/search" class="header-left" slot="left">
        <i class="icon-sousuo1 ico"></i>
      </router-link>
      <router-link
        :to="userInfo._id ? '/detail' : '/login'"
        class="header-right"
        slot="right"
      >
        <span v-if="!userInfo._id">登录|注册</span>
        <i class="icon-my ico1" v-if="userInfo._id"></i>
      </router-link>
    </NavHeader>
    <!-- 轮播图区域开始 -->
    <div class="content" ref="scrollWrap">
      <div>
        <div>
          <div class="swiper" v-if="categoryArray.length">
            <div class="swiper-wrapper">
              <div
                class="swiper-slide"
                v-for="(categoryItem, index) in categoryArray"
                :key="index"
              >
                <router-link
                  class="swiper-link-wrap"
                  v-for="cateItem in categoryItem"
                  :key="cateItem.id"
                  :to="cateItem.link"
                >
                  <div class="food-wrap">
                    <img
                      class="food-img"
                      :src="baseImageUrl + cateItem.image_url"
                      alt=""
                    />
                  </div>
                  <span class="food-name">{{ cateItem.title }}</span>
                </router-link>
              </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
          </div>
          <img v-else src="./images/msite_back.svg" alt="" />
        </div>
        <main>
          <div class="shop-list-wrap">
            <i class="icon-caidan ico"></i>
            <span>附近商家</span>
          </div>
          <ShopList
            :shopList="shopsList"
            @handleGetOrderId="handleGetOrderId"
          />
        </main>
      </div>
    </div>
  </section>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import Swiper from 'swiper'
import 'swiper/swiper-bundle.css'
import BScroll from 'better-scroll'
import NavHeader from '../../components/NavHeader'
import ShopList from '../../components/ShopList/index.vue'
export default {
  name: 'Home',
  components: { NavHeader, Swiper, ShopList },

  data () {
    return {
      swiper: null, // 轮播
      baseImageUrl: 'https://fuss10.elemecdn.com',
      scroll: null
    }
  },
  computed: {
    ...mapState(['userInfo', 'address', 'categoryList', 'shopsList']),
    categoryArray () {
      let newArr = []
      let totalArr = []
      const { categoryList } = this
      categoryList.forEach(el => {
        if (newArr.length >= 8) {
          newArr = []
        }
        if (newArr.length === 0) {
          totalArr.push(newArr)
        }
        newArr.push(el)
      })
      return totalArr
    }
  },
  watch: {
    categoryList (val) {
      this.$nextTick(() => {
        this.swiper = new Swiper('.swiper', {
          loop: true, // 循环模式选项
          pagination: { // 如果需要分页器
            el: '.swiper-pagination',
            clickable: true
          }
        })
        this.scroll = new BScroll('.content', {
          scrollY: true,
          click: true,
          pullUpLoad: true
        })
      })
    }
  },
  mounted () {
    this.loadingPosition()
    this.loadingCategoryList()
    this.loadingShopsList()
  },

  methods: {
    ...mapActions(['loadingPosition', 'loadingCategoryList', 'loadingShopsList']),
    handleGetOrderId (id) {
      this.$router.push({
        name: 'Shop',
        params: {
          id
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../assets/common/stylus/mixins.styl'
.home-container
  width 100%
  height 100%
  overflow-y scroll
  .swiper
    padding-top 80px
    width 100%
    height 240px
    background-color #fff
    bottom-border-1px($bc)
    display flex
    .swiper-wrapper
      width 100%
      .swiper-slide
        height 100px
        display flex
        flex-wrap wrap
        .swiper-link-wrap
          width 25%
          height 100px
          display flex
          flex-direction column
          align-items center
          .food-wrap
            width 100%
            .food-img
              width 100px
              height 80px
          .food-name
            color #333
  main
    margin-top 10px
    margin-bottom 120px
    top-border-1px($bc)
    background-color #fff
    .shop-list-wrap
      padding 10px
      color #aaa
      .ico
        color #333
</style>
